<template>
  <div>
    <div class="form-head">
      订单号<el-input
        placeholder="订单号"
        v-model="reqOrderInfo.orderNo"
        clearable
      >
      </el-input>
      收货人
      <el-input placeholder="收货人" v-model="reqOrderInfo.consignee" clearable>
      </el-input>
      手机号<el-input
        placeholder="手机号"
        v-model="reqOrderInfo.phone"
        clearable
      >
      </el-input>
      订单状态
      <el-select
        clearable
        v-model="reqOrderInfo.orderState"
        slot="prepend"
        placeholder="订单状态"
      >
        <el-option label="已受理" value="已受理"></el-option>
        <el-option label="派送中" value="派送中"></el-option>
        <el-option label="已完成" value="已完成"></el-option>
      </el-select>
    </div>

    <div class="form-date">
      <span class="demonstration">选择时间</span>
      <el-date-picker
        v-model="reqOrderInfo.date"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
      >
      </el-date-picker>

      <el-button
        class="btn"
        type="primary"
        size="small"
        @click="clectionOrderInfo(reqOrderInfo)"
        >查询</el-button
      >
    </div>
    <!--  -->
  </div>
</template>

<script>
import moment from 'moment'

export default {
  data () {
    return {
      searchInfo: {}
    }
  },
  props: {
    getOrderList: {
      type: Function
    },
    reqOrderInfo: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    // 应该根据查询的时候,是否带过参数,如果查询的时候带参数了,那么就不能正常分页,如果查询没有带参数,那么正常分页
    clectionOrderInfo () {
      let f = false
      this.$nextTick(() => {
        const {
          orderNo,
          consignee,
          phone,
          orderState,
          date
        } = this.reqOrderInfo

        if (this.reqOrderInfo.date) {
          let date = this.reqOrderInfo.date.map(el => {
            return moment(el).format('YYYY-MM-DD HH:mm:ss')
          })
          date = JSON.stringify(date)
          this.reqOrderInfo.date = date
        }
        // 如果有一个为真,那么就不能正常分页
        if (orderNo || consignee || phone || orderState || date) {
          f = false
        } else {
          f = true
        }
        console.log(f)
        this.getOrderList(
          {
            ...this.reqOrderInfo,
            currentPage: 1
          },
          f
        )
      })
    }
  },
  watch: {
    reqOrderInfo: {
      handler: function () {
        // this.searchInfo = JSON.parse(JSON.stringify(this.reqOrderInfo))
      },
      deep: true
    }
  }
}
</script>

<style lang="less" scoped>
.form-head {
  width: 100%;
  padding-left: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .el-input,
  .el-select {
    width: 16%;
    margin: 0 10px;
  }
}
.form-date {
  margin-top: 20px;
  .demonstration {
    margin-right: 10px;
  }
}

.btn {
  margin-left: 50px;
}
</style>
